<template>
	<view class="bg">
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="授权登录" :placeholder="true" @leftClick="goBack"></u-navbar>
		<view style="position: fixed;top: 300rpx;z-index: 2;width: 100%;">
			<view class="flex flex-direction align-center justify-center ">
				<image src="http://n298651t63.zicp.vip:9001/image/logo.jpg" style="height: 400rpx;"></image>
				<text class="margin-top-lg text-tea text-sm">享受您的快乐时光</text>
			</view>
		</view>
		<view style="position: fixed;top:960rpx;width: 100%;z-index: 2;" class="flex align-center justify-center">
			<view class="flex flex-direction  justify-center" style="width: 60%;">
				<button class="bg-tea cu-btn  lg" @click="login">微信授权登录</button>
				<!--<button class="bg-tea cu-btn margin-top-sm  lg" @click="loginByUserName">账号密码登录</button>-->
				<button class="cu-btn  line-tea margin-top-sm lg" @click="goBack">取消</button>
			</view>
		</view>
		<u-popup :closeOnClickOverlay="false" :show="showGetUserPhone" mode="center"
			:customStyle="{width:'70%','borderRadius':'20rpx'}">
			<view class="flex flex-direction align-center padding-xl">
				<image src="../../static/png/getPhone.jpg" style="width: 160rpx;height: 160rpx;border-radius: 160rpx;"
					mode="scaleToFill">
				</image>
				<text class="text-bold text-xl">授权手机号</text>
				<text class="text-grey text-sm margin-top-sm">为了提供更好的售后服务</text>
				<text class="text-grey text-sm">我们希望获取到你的手机号码</text>
				<button :loading="getPhoneLoading" :disabled="getPhoneLoading" class="cu-btn bg-blue margin-top-xl "
					style="width: 80%;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即授权</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				getPhoneLoading: false,
				showGetUserPhone: false,
				loading: false,
				form: {
					username: '',
					password: '',
				},
				rules: {
					username: {
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				loginResult: {},
				userInfo: {},
			}
		},
		onLoad() {
			this.$u.vuex('UserInfo', null);
		},
		methods: {
			loginByUserName(){
				uni.navigateTo({
					url:'/pages/login/loginByUserName'
				})
			},
			getPhoneNumber(e) {
				this.showGetUserPhone = false;
				this.getPhoneLoading = true;
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					this.getPhoneLoading = false;
					this.$refs.uToast.show({
						message: '用户拒绝获取手机号，登陆失败！',
						type: 'error',
						position: 'top'
					});
					return;
				} else {
					let that = this;
					uni.$u.http.post('/Customer/GetPhoneNumber', {
						id: that.loginResult.user.userid,
						entrydata: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						that.$refs.uToast.show({
							message: '登陆成功',
							type: 'success',
							position: 'top'
						});
						that.getPhoneLoading = false;
						that.loginResult.user.phone = res.data;
						uni.setStorage({
							key: "UserInfo",
							data: that.loginResult
						});
						uni.navigateBack();
					})
				}
			},
			login() {
				let that = this;
				uni.showLoading({
					title: '登录中，请稍后'
				});
				uni.login({
					provider: 'weixin',
					success({
						errMsg,
						code
					}) {
						uni.$u.http.post('/login', {
							code: code
						}).then(res => {

              that.$refs.uToast.show({
                message: '登录成功！',
                type: 'success',
                position: 'top'
              });
              uni.setStorage({
                key: "UserInfo",
                data: res.data
              });

              setTimeout(()=>{
                uni.navigateBack();
              }, 1500)
							// //弹窗请求用户授予手机号权限，否则不通过
							// that.loginResult = res.data;
							// //that.userInfo=res.data;
							// if (that.loginResult.user.phone) {
							// 	//如果有手机号
							//
							// 	uni.navigateBack();
							// } else {
							// 	that.showGetUserPhone = true;
							// }
						});
					},
					fail() {
						this.$refs.uToast.show({
							message: '登录失败',
							type: 'error',
							position: 'top'
						})
					},
					complete() {
						uni.hideLoading();
					}
				})

			},
			goBack() {
				//uni.navigateBack();
				uni.switchTab({
					url: '/pages/index/storeindex'
				})
			},

		}
	}
</script>

<style scoped>
	.bg {
		height: 100vh;
		/* 	background-image: url('http://localhost:53909/image/file/20221017/c8e8b04a482d4fc4952362d3bf4b7b22_new.png');
		background-size: cover; */
		background-color: #fff;
	}

	.forget {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.forget view {
		font-size: 24rpx;
		margin-top: 50rpx;
		color: #10c2c4
	}
</style>
